<template>
  <div class="enter-page">
    <img class="title" src="@/assets/images/enter-title.png">
    <div @click="jump(1)" :style="position.menu1" class="menu-item item-1">
      <img src="@/assets/images/enter-menu.png">
      人才云图
    </div>
    <div @click="jump(2)" :style="position.menu2" class="menu-item item-2">
      <img src="@/assets/images/enter-menu.png">
      人才招聘
    </div>
    <div @click="jump(3)" :style="position.menu3" class="menu-item item-3">
      <img src="@/assets/images/enter-menu.png">
      人才服务
    </div>
    <div @click="jump(4)" :style="position.menu4" class="menu-item item-4">
      <img src="@/assets/images/enter-menu.png">
      人才政策
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      animationTimer: null,
      position: {
        menu1: {left: '50%', top: '23%', transform: 'translate(-50%, -50%) scale(0.7)'},
        menu2: {left: '85%', top: '50%', transform: 'translate(-50%, -50%) scale(0.8)'},
        menu3: {left: '50%', top: '83%', transform: 'translate(-50%, -50%) scale(1)'},
        menu4: {left: '15%', top: '50%', transform: 'translate(-50%, -50%) scale(0.8)'},
      }
    }
  },
  methods:{
    jump(type){
      if(type==1){
        this.$router.push({name:'Index'});
        return;
      }
      if(type==2){
        window.open('http://0937.job1001.com/');
        return;
      }
      if(type==3){
        this.$router.push({name:'Ecode'})
      }
      if(type==4){
        this.$router.push({name:'Identify'})
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.animationTimer)
  },
  mounted() {
    this.animationTimer=setInterval(()=>{
      const last=JSON.parse(JSON.stringify(this.position));
      this.position.menu1=last.menu2;
      this.position.menu2=last.menu3;
      this.position.menu3=last.menu4;
      this.position.menu4=last.menu1;
    },6000)
  }
}
</script>

<style lang="scss" scoped>
.enter-page {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/enter-bg.jpg") no-repeat center;
  background-size: 100% 100%;

  .title {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 90px;
    width: 600px;
  }

  .menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    transition:all 2s;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      animation: rotation 8s linear infinite;
    }

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
  }

  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /*.menu-item.item-1{
    animation: item1-move-x 8s cubic-bezier(0.36,0,0.64,1) -4s infinite,item1-move-y 8s cubic-bezier(0.36,0,0.32,1) 0s infinite;
  }
  @keyframes item1-move-x {
    0% {
      left: 50%;
    }
    25% {
      left: 85%;
    }
    50% {
      left: 50%;
    }
    75% {
      left: 15%;
    }
    100%{
      left: 50%;
    }
  }
  @keyframes item1-move-y {
    0% {
      top: 23%;
      transform: translate(-50%,-50%) scale(0.7);
    }
    25% {
      top: 50%;
      transform: translate(-50%,-50%) scale(0.8);
    }
    50% {
      top: 83%;
      transform: translate(-50%,-50%) scale(1);
    }
    75% {
      top: 50%;
      transform: translate(-50%,-50%) scale(0.8);
    }
    100%{
      top: 23%;
      transform: translate(-50%,-50%) scale(0.7);
    }
  }*/
}
</style>
